import { List, Card, Spin, Pagination, Image as AntdImage, Carousel, Tree, Space, Radio, Popconfirm, Row, Col, Menu, Table } from "antd";
import { useModel, history, Outlet, useOutletContext } from "umi";
import { Button, ButtonGroup, Card as SemiCard } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconRefresh, IconDelete, IconEdit } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect } from "react";

const BradCommditiesPage = () => {
	const context = useOutletContext();
	if (context?.showFormat === "list") {
		return (
			<List
				loading={state.loading}
				grid={{ gutter: 20, xs: 2, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }}
				dataSource={[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]}
				style={{ padding: 20 }}
				renderItem={(item) => {
					let actions = [<a>编辑</a>, <a>批次</a>];
					actions.push(
						<Popconfirm title="确认要删除该商品信息吗？" onConfirm={() => {}}>
							删除
						</Popconfirm>
					);
					return (
						<List.Item>
							<CommodityListCard item={item} actions={["编辑", "批次", "删除"]} reloadData={loadCommodities} />
						</List.Item>
					);
				}}
			/>
		);
	}

	if (context.showFormat === "table") {
		let actions = (_, r, i) => (
			<Space size={0}>
				<Button theme="borderless">编辑</Button>
				<Button theme="borderless">批次</Button>
				<Button theme="borderless">删除</Button>
			</Space>
		);
		return (
			<Table size="small" dataSource={[1, 1, 1]} bordered pagination={false}>
				<Table.Column title="序号" width={60} align="center" render={(_, r, i) => i + 1} />
				<Table.Column title="图片" width={100} align="center" />
				<Table.Column title="商品名称" align="left" />
				<Table.Column title="品牌" width={160} align="center" />
				<Table.Column title="规格型号" width={200} align="left" />
				<Table.Column title="单位" width={80} align="center" />
				<Table.Column title="存货数量" width={100} align="center" />
				<Table.Column title="存货均价" width={120} align="right" />
				<Table.Column title="存货金额" width={120} align="right" />
				<Table.Column title="操作" width={200} align="center" render={actions} />
			</Table>
		);
	}
	return <></>;
};

const CommodityListCard = () => {
	const { setModalVisible, setModalTitle, setModalWidth, setModalComponent } = useModel("global.modal");
	const { goipfs, windowInnerHeight } = useModel("global");

	const openEditModal = () => {
		setModalTitle("编辑服务项目信息");
		setModalVisible(true);
		setModalWidth(600);
		setModalComponent(<EditForm record={item} reloadData={reloadData} />);
	};

	const deleteItem = (item) => {};

	let actionItems = [];

	for (const key in actions) {
		switch (actions[key]) {
			case "编辑":
				actionItems.push(<a onClick={openEditModal}>编辑</a>);
				break;
			case "删除":
				actionItems.push(
					<Popconfirm title="确认要删除该服务项目信息吗？" onConfirm={deleteItem}>
						删除
					</Popconfirm>
				);
				break;
			default:
				break;
		}
	}

	const cardTitle = (
		<div style={{ display: "flex", justifyContent: "space-between" }}>
			<div>服务项目品牌</div>
			<div>
				<a>
					<QrcodeOutlined style={{ fontSize: 20 }} />
				</a>
			</div>
		</div>
	);

	const description = (
		<div>
			{price && <div>￥{price}</div>}
			<div>服务项目说明</div>
		</div>
	);

	return (
		<Card
			size="small"
			hoverable
			style={{ width: "100%" }}
			title={cardTitle}
			cover={
				<div style={{ marginTop: 10, width: 120, marginLeft: "auto", marginRight: "auto" }}>
					<AntdImage preview width={120} height={120} src={"https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"} />
				</div>
			}
			actions={actionItems}
		>
			<Card.Meta style={{ textAlign: "center" }} title={"服务项目名称"} description={description} />
		</Card>
	);
};

export default BradCommditiesPage;
